<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'basic-usage'">
    <div class="devui-demo-title">{{ 'components.select.SelectBasicDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.select.SelectBasicDemo.description' | translate }}</div>
    <d-codebox id="components-select-basic" [sourceData]="SelectBasicComponent">
      <d-select-basic demo></d-select-basic>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'object-filter'">
    <div class="devui-demo-title">{{ 'components.select.ObjectFilterDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.select.ObjectFilterDemo.description' | translate }}</div>
    <d-codebox id="components-select-basic" [sourceData]="ObjectFilterComponent">
      <d-object-filter demo></d-object-filter>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'custom-search'">
    <div class="devui-demo-title">{{ 'components.select.CustomSearchDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.select.CustomSearchDemo.description' | translate }}
    </div>
    <d-codebox id="components-select-object" [sourceData]="SelectObjectComponent">
      <d-custom-search demo></d-custom-search>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'select-all'">
    <div class="devui-demo-title">{{ 'components.select.SelectAllDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.select.SelectAllDemo.description' | translate }}
    </div>
    <d-codebox id="components-select-all" [sourceData]="SelectAllComponent">
      <d-select-all demo></d-select-all>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'select-template'">
    <div class="devui-demo-title">{{ 'components.select.SelectTemplateDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.select.SelectTemplateDemo.description' | translate }}
    </div>
    <d-codebox id="components-select-template" [sourceData]="SelectTemplateComponent">
      <d-select-template demo></d-select-template>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'labelization'">
    <div class="devui-demo-title">{{ 'components.select.LabelizationDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.select.LabelizationDemo.description' | translate }}
    </div>
    <d-codebox id="labelization" [sourceData]="LabelizationComponent">
      <d-labelization demo></d-labelization>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'disabled'">
    <div class="devui-demo-title">{{ 'components.select.DisabledDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.select.DisabledDemo.description' | translate }}
    </div>
    <d-codebox id="components-select-basic" [sourceData]="DisabledComponent">
      <d-disabled demo></d-disabled>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'allow-clear-value'">
    <div class="devui-demo-title">{{ 'components.select.AllowClearValueDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="allow-clear-value" [sourceData]="AllowClearValueComponent">
      <d-allow-clear-value demo></d-allow-clear-value>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'append-to-body'">
    <div class="devui-demo-title">{{ 'components.select.AppendToBodyDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.select.AppendToBodyDemo.description' | translate }}</div>
    <d-codebox id="append-to-body'" [sourceData]="AppendToBodyComponent">
      <d-append-to-body demo></d-append-to-body>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'lazy-load-virtual-scroll'">
    <div class="devui-demo-title">{{ 'components.select.LazyLoadVirtualScrollDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.select.LazyLoadVirtualScrollDemo.description' | translate }}
    </div>
    <d-codebox id="lazy-load-virtual-scroll" [sourceData]="LazyLoadVirtualScrollComponent">
      <d-lazy-load-virtual-scroll demo></d-lazy-load-virtual-scroll>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'async-loading'">
    <div class="devui-demo-title">{{ 'components.select.LoadingDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="loading" [sourceData]="LoadingComponent">
      <d-loading demo></d-loading>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'custom-area'">
    <div class="devui-demo-title">{{ 'components.select.CustomAreaDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.select.CustomAreaDemo.description' | translate }}</div>
    <d-codebox id="custom-area" [sourceData]="CustomAreaComponent">
      <d-custom-area demo></d-custom-area>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'custom-area-direction'">
    <div class="devui-demo-title">{{ 'components.select.CustomAreaDirectionDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="custom-area-direction" [sourceData]="CustomAreaDirectionComponent">
      <d-custom-area-direction demo></d-custom-area-direction>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'multi-keep-order'">
    <div class="devui-demo-title">{{ 'components.select.MultiKeepOrderDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.select.MultiKeepOrderDemo.description' | translate }}
    </div>
    <d-codebox id="multi-keep-order" [sourceData]="MultiKeepOrderComponent">
      <d-multi-keep-order demo></d-multi-keep-order>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'user-limit-selected-number'">
    <div class="devui-demo-title">{{ 'components.select.UserLimitSelectedNumberDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="user-limit-selected-number" [sourceData]="UserLimitSelectedNumberComponent">
      <d-user-limit-selected-number demo></d-user-limit-selected-number>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'user-search-n-lazyload'">
    <div class="devui-demo-title">{{ 'components.select.UserSearchNLazyLoadDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="user-search-n-lazyload" [sourceData]="UserSearchNLazyLoadComponent">
      <d-user-search-n-lazyload demo></d-user-search-n-lazyload>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'user-mail-search'">
    <div class="devui-demo-title">
      {{ 'components.select.UserMailSearchDemo.title' | translate }}
    </div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-select-mailsearch" [sourceData]="UserMailSearchComponent">
      <d-user-mail-search demo></d-user-mail-search>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'model-value'">
    <div class="devui-demo-title">{{ 'components.select.ModelValueDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-select-modalvalue" [sourceData]="ModelValueComponent">
      <d-model-value demo></d-model-value>
    </d-codebox>
  </div>
</div>
